<template>
  <div class="test-carousel-page">
    <h2>Carousel Image Test</h2>
    <div class="test-image-container">
      <el-image :src="testImage" fit="cover" class="test-image" />
    </div>
    <p>If you see a full-width image above, it means el-image and image imports are working.</p>
    <p>Please check your browser's console for any errors related to image loading.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import bannerImage1 from '@/assets/banners/image1.jpg'; // Import the image directly

const testImage = ref(bannerImage1);

// Optional: Add error handling for el-image
const handleImageError = () => {
  console.error("Failed to load test image:", testImage.value);
};
</script>

<style scoped>
.test-carousel-page {
  padding: 20px;
  text-align: center;
}

.test-image-container {
  width: 80%;
  height: 400px;
  margin: 20px auto;
  border: 2px dashed #ccc;
  overflow: hidden;
  position: relative;
}

.test-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Ensure no extra space below image */
}
</style> 